<template>
  <div class="control-panel">
    <div class="left-controls">
      <!-- 学期选择 -->
      <el-select
          :model-value="selectedTerm"
          placeholder="选择学期"
          class="control-item"
          clearable
          @update:model-value="$emit('update:selected-term', $event)"
      >
        <el-option
            v-for="item in termOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <!-- 周次选择 -->
      <el-select
          :model-value="selectedWeek"
          placeholder="选择周次"
          class="control-item"
          clearable
          @update:model-value="$emit('update:selected-week', $event)"
      >
        <el-option
            v-for="item in weekOptions"
            :key="item"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>

    <div class="right-buttons">

    </div>
  </div>
</template>

<script setup>


const props = defineProps({
  selectedClass: {
    type: String,
    default: ''
  },
  classOptions: {
    type: Array,
    default: () => []
  },
  selectedTerm: {
    type: String,
    default: ''
  },
  termOptions: {
    type: Array,
    default: () => []
  },
  selectedWeek: {
    type: [String, Number],
    default: ''
  },
  weekOptions: {
    type: Array,
    default: () => []
  },
  hasSelectedCourse: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  'update:selected-class',
  'update:selected-term',
  'update:selected-week',
  'adjust-time',
  'add-activity',
  'show-labor-week'
]);
</script>

<style scoped>
.control-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 4px;
}

.left-controls {
  display: flex;
  gap: 10px;
}

.control-item {
  width: 300px;
}

.right-buttons {
  display: flex;
  gap: 10px;
}

.action-btn :deep(.el-icon) {
  font-size: 16px;
}
</style>
